$(function () {
  "use strict";
  var Viewer = window.Viewer;
  var console = window.console || { log: function () {} };
  var pictures = document.querySelector(".docs-pictures");
  var toggles = document.querySelector(".docs-toggles");
  var buttons = document.querySelector(".docs-buttons");

  var options = {
    // inline: true,
    toolbar: {
      prev: 1,
      next: 1,
    },
    title: false,
    //url: 'data-original',
    url: "src",
    ready: function (e) {
      console.log(e.type);
    },
    show: function (e) {
      console.log(e.type);
    },
    shown: function (e) {
      console.log(e.type);
    },
    hide: function (e) {
      console.log(e.type);
    },
    hidden: function (e) {
      console.log(e.type);
    },
    view: function (e) {
      console.log(e.type);
    },
    viewed: function (e) {
      console.log(e.type);
    },
    zoom: function (e) {
      console.log(e.type);
    },
    zoomed: function (e) {
      console.log(e.type);
    },
    play: function (e) {
      console.log(e.type);
    },
    stop: function (e) {
      console.log(e.type);
    },
  };
  var viewer = new Viewer(pictures, options);

  function toggleButtons(mode) {
    var targets;
    var target;
    var length;
    var i;

    // if (/modal|inline|none/.test(mode)) {
    //   targets = buttons.querySelectorAll('button[data-enable]');

    //   for (i = 0, length = targets.length; i < length; i++) {
    //     target = targets[i];
    //     target.disabled = true;

    //     if (String(target.getAttribute('data-enable')).indexOf(mode) > -1) {
    //       target.disabled = false;
    //     }
    //   }
    // }
  }

  function addEventListener(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    }
  }

  toggleButtons(options.inline ? "inline" : "modal");

  // toggles.onchange = function (event) {
  //   var e = event || window.event;
  //   var input = e.target || e.srcElement;
  //   var name;

  //   if (viewer) {
  //     name = input.getAttribute('name');
  //     options[name] = name === 'inline' ? JSON.parse(input.getAttribute('data-value')) : input.checked;
  //     viewer.destroy();
  //     viewer = new Viewer(pictures, options);
  //     toggleButtons(options.inline ? 'inline' : 'modal');
  //   }
  // };

  // buttons.onclick = function (event) {
  //   var e = event || window.event;
  //   var button = e.target || e.srcElement;
  //   var method = button.getAttribute('data-method');
  //   var target = button.getAttribute('data-target');
  //   var args = JSON.parse(button.getAttribute('data-arguments')) || [];

  //   if (viewer && method) {
  //     if (target) {
  //       viewer[method](document.querySelector(target).value);
  //     } else {
  //       viewer[method](args[0], args[1]);
  //     }

  //     switch (method) {
  //       case 'scaleX':
  //       case 'scaleY':
  //         args[0] = -args[0];
  //         break;

  //       case 'destroy':
  //         viewer = null;
  //         toggleButtons('none');
  //         break;
  //     }
  //   }
  // };

  // $('[data-toggle="tooltip"]').tooltip();
});
